Robok

AI Agency & Technology HTML Template

Thank you for purchasing our template. We hope that you find all your questions regarding this Template answered in this Documentation as much in details as possible. However, if you still need support, do not hesitate to contact us at our support forum for this Template. If you have any questions that are beyond the scope of this help file, please feel free to email me. Thanks so much!

Intro

Note: This is not a WordPress theme, and it wont install like a WordPress theme, this is a HTML5 template (static website).

Welcome to Robok, where the future of web design meets the power of artificial intelligence. In an industry defined by innovation, your website needs to be more than just informative—it needs to be an experience. Robok is built from the ground up to showcase complex technology in an stunningly simple and engaging way.

Robok is a cutting-edge, high-performance HTML5 template meticulously crafted for the pioneers of the intelligent future. Whether you're launching the next revolutionary AI SaaS platform, a powerful text-to-image generator, a sophisticated digital agency, or a deep learning consultancy, Robok provides the perfect, futuristic foundation. With its sleek, modern design and a vast array of AI-specific demos and features, Robok is engineered to captivate your audience, generate leads, and establish instant credibility in the fast-evolving tech landscape.

This is highly customizable looks awesome on tablets and mobile devices. Well commented code, well-documented file structure and 24/7 professional and ultra-fast Support.

Robok comes with necessary features for your online presence like Service Details, Project Details, About Us, Contact and Blog pages etc. Robok can be a great choice for your online presence. Looking for release your company website ? This Template is best choice. This is highly customizable – looks awesome on tablets and mobile devices. Well commented code, well-documented file structure and 24/7 professional and ultra-fast Support.

To edit this template with your info you will need a code editor, i use Visual Studio Code (https://code.visualstudio.com/) and a browser i recommend to use Google Chrome.

It is really easy to use. There is multiple home page layouts to chose, also various selection of pages that you can use to create your website, but you can also create your own page layouts very easily (just copy and paste code form the elements examples).

When you start editing the template with your info is good idea to create separate folder, copy the assets folder and 404.html page there, rename one of the index... files to index.html and then move and edit pages that you will use. Also is good practice to create separate styleseet for your edits and load it bellow Robok CSS.

Instalation

Follow the steps below to setup your site template:

  1. Unzip the downloaded package and open the /HTML folder to find all the template files. You will need to upload these files to your hosting web server using FTP in order to use it on your website.
  2. Below is the folder structure and needs to be uploaded to your website root directory:
    • HTML/css - Stylesheet files
    • HTML/fonts – Icon font files
    • HTML/img - Image files
    • HTML/js - Javacript files
  3. You should upload all or specific HTML files as per your need.
  4. You're now good to go..! Start adding your content/images and generate your beautiful brand new website for your awesome users.

What's included

Checkout the files that you'll see upon downloading

Once you download the template, you can see a folder with several files and sub folders. You can read description of some important files in continue.

  • assets
    • css
      • bootstrap.min.cssBootstrap Main CSS
      • font-awesome.min.cssFont Awesome Pro
      • magnific-popup.cssPopup Window CSS
      • swiper-bundle.min.cssSwiper Bundle CSS
      • animate.cssAnimate CSS
      • validnavs.cssMultipurpose Menu CSS
      • helper.cssHelper CSS
      • style.cssTemplate Core CSS
      • unit-test.cssBlog Unit Test CSS
      • style.cssCustom CSS
    • fonts
    • imgHere is a place to put your media files like logo, images, videos, etc.
    • js
      • jquery.min.jsJquery Main
      • bootstrap.bundle.min.jsBootstrap Min JS
      • jquery.appear.jsAppear JS
      • jquery.easing.min.jsEasing JS
      • jquery.magnific-popup.min.jsPopup Window Helper JS
      • swiper-bundle.min.jsSwiper Slider JS
      • wow.min.jsWOW Animation JS
      • progress-bar.min.jsProgressbar JS
      • imagesloaded.pkgd.min.jsIsotop Popup JS
      • jquery.nice-select.min.jsInput Select Design JS
      • count-to.jsCount To JS
      • YTPlayer.min.jsVideo Background JS
      • validnavs.jsNavbar JS
      • custom.jsTemplate Mian JS
  • index.html
  • index-2.html
  • ...
  • style.css

HTML Structure

Check the structure of HTML files

Robok follows a simple and easy to customize coding structure. Here is the sample for your reference: 


<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Robok - AI Agency & Technology HTML Template</title>

    <!-- ========== Start Stylesheet ========== -->
    <link href="assets/css/bootstrap.min.css" rel="stylesheet">
    <link href="assets/css/font-awesome.min.css" rel="stylesheet">
    <link href="assets/css/magnific-popup.css" rel="stylesheet">
    <link href="assets/css/swiper-bundle.min.css" rel="stylesheet">
    <link href="assets/css/animate.csss" rel="stylesheet">
    <link href="assets/css/validnavs.css" rel="stylesheet">
    <link href="assets/css/helper.css" rel="stylesheet">
    <link href="assets/css/style.css" rel="stylesheet">
    <link href="assets/css/unit-test.css" rel="stylesheet">
    <link href="style.css" rel="stylesheet">
  </head>
  

  <body>

    <!-- Start Navigation -->
    <nav class="navbar navbar-default navbar-fixed white no-background bootsnav">

    </nav>
    <!-- End Navigation-->


    <!-- Start Main
    ============================================= --->
    <main>

    </main>
    <!-- END Main Content -->


    <!-- Star Footer
    ============================================= -->
    <footer>

    </footer>
    <!-- End Footer -->


    <!-- jQuery Frameworks
    ============================================= -->
    <script src="assets/js/jquery.min.js"></script>
    <script src="assets/js/bootstrap.bundle.min.js"></script>
    <script src="assets/js/jquery.appear.js"></script>
    <script src="assets/js/jquery.easing.min.js"></script>
    <script src="assets/js/jquery.magnific-popup.min.js"></script>
    <script src="assets/js/swiper-bundle.min.js"></script>
    <script src="assets/js/wow.min.js"></script>
    <script src="assets/js/progress-bar.min.js"></script>
    <script src="assets/js/circle-progress.js"></script>
    <script src="assets/js/isotope.pkgd.min.js"></script>
    <script src="assets/js/imagesloaded.pkgd.min.js"></script>
    <script src="assets/js/jquery.nice-select.min.js"></script>
    <script src="assets/js/count-to.js"></script>
    <script src="assets/js/YTPlayer.min.js"></script>
    <script src="assets/js/validnavs.js"></script>
    <script src="assets/js/custom.js"></script>

  </body>
</html>

Customization

How to customize header
-------------------------------

01. Main Header

Thumb Thumb Thumb

02. Right Sidebar

Thumb

03. Mobile Menu Logo

Thumb

How to change favicon

Thumb

How to control preloader

Thumb

Thumb

How to change breadcrumb

Thumb

How to change customize banner one information

Thumb

How to change customize banner two information

Thumb

How to change customize banner three information

Thumb

How to about one info

Thumb

How to about two info

Thumb

How to customize service

Thumb

Thumb

Thumb

How to customize service details

Thumb

How to customize Work Process

Thumb

How to customize Projects

Thumb

How to customize Project Details

Thumb

How to customize team

Thumb

Team Details Page

Thumb

How customize testimonail

Thumb

How to customize blog

Thumb

How to change Mail Address with Your's - Open mail.php file and edit.

Thumb

How to change contact form email

Thumb

How to change footer information

Thumb

How to Add/Remove CSS

Thumb

How to Add/Remove JS

Thumb

Changing fonts

Robok uses 1 fonts: Sora from the Google Fonts Library. You can change the fonts by following code 

 @import url('https://fonts.googleapis.com/css2?family=Sora:wght@100..800&display=swap');

attention

Read The following information Carefully

  • Fonts used in this item are loaded from Google. If you don't have an internet connection then item fonts can be different (don't worry about it because this is not an issue)
  • if you think documentation is not enough to customize this item then email to validtheme@gmail.com
  • Before asking for any help you need to make sure that you are the actual buyer for this item. you have two ways to prove that
    1. collect a support ticket and send with your mail
    2. Send a screenshot after login to you account So that we can understand you have access to download this item from themeforest

credits

We would really love to take this opportunity to appreciate guys whose items were helpful to us to make Robok a really beautiful template for our awesome users:

Images and video

JS Libraries

CSS & Fonts